import React, { useEffect, useState, useRef, Suspense } from 'react'
import s from './style.module.less'
import MyIcon from '@/components/myIcon'
import { useNavigate } from 'react-router-dom'
import { ShareSheet, Button } from 'react-vant';
import View from "@/components/view";
import cx from 'classnames'
const SuspensionBtn = (props) => {
    const cb = props.changeCallback
    const [seleted,setSelect] = useState(0)
    const items = [
        {   
            title:'VR',
            ClickFun:(index)=>{
                setSelect(index)
                cb(index)
            },
        },
        {   
            title:'户型',
            ClickFun:(index)=>{
                setSelect(index)
                cb(index)
            },
        },
        {   
            title:'房间',
            ClickFun:(index)=>{
                setSelect(index)
                cb(index)

            },
        },
        {   
            title:'小区',
            ClickFun:(index)=>{
                setSelect(index)
                cb(index)
            },
        }
    ]
    return (
        <div className={s.suspensionBtn}>
            {
                items.map((item,index)=>{
                    return (
                        <div key={index} className={cx({
                            [s.active]:seleted == index
                        })} onClick={()=>{
                            item.ClickFun(index)
                        }}>
                            {item.title}
                        </div>
                    )
                })
            }
        </div>
    )
}
export default SuspensionBtn